<!DOCTYPE html>
<html>
<head>
  <title>标题</title>
  <meta content="no-cache" http-equiv="pragma">
  <meta content="no-cache" http-equiv="cache-control">
  <meta content="0" http-equiv="expires">
  <meta content="keyword1,keyword2,keyword3" http-equiv="keywords">
  <meta content="This is my page" http-equiv="description">
  <link href="/Css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/style.css" rel="stylesheet" type="text/css"/>


  <link href="/bui/assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
  <link href="/bui/assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
  <link href="/bui/assets/css/page-min.css" rel="stylesheet" type="text/css"/>
  <script src="/bui/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script src="/bui/assets/js/acharts-min.js" type="text/javascript"></script>
  <style type="text/css">
    .x-chart-legend {
      display: none;
    }
  </style>
</head>
<body>
<table class="table table-bordered table-hover definewidth m10" id="hib">
  <tr>
    <td style="text-align: center; height: 50px; line-height: 50px;" width="60%">
				<span th:each="year : ${years}">
					<button class="btn btn-primary"
                  th:text="${year }+ '年'"
                  th:value="${year}"
                  type="button"
          ></button>
					&nbsp;&nbsp;&nbsp;&nbsp;
				</span>
    </td>
  </tr>
  <tr>
    <td style="text-align: center; height: 50px; line-height: 50px;" width="60%">
				<span th:each="type : ${types}">
          <label style="display: inline;margin: 0px 10px">
            <input checked="checked" name="types"
                   th:text="${type.name }"
                   th:value="${type.id }"
                   type="checkbox"/>
          </label>
				</span>

    </td>
  </tr>
  <tr>
    <td class="tableleft" colspan="2" style="text-align: center; height: 50px; line-height: 50px;">
      <a class="btn btn-success" id="print">打印</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input id="con" type="hidden" value=""/></td>
  </tr>
</table>
<div class="detail-section m10">
  <div id="title" style="text-align: center;font-size: 24px;color: blue;"></div>
  <table>
    <tr>
      <td>
        <div id="canvas1" style="width: 47%"></div>
      </td>
      <td>
        <div id="canvas2" style="width: 47%"></div>
      </td>
    </tr>
  </table>
</div>
<script type="text/javascript">
  //默认系统当前年份为参数年
  var year = new Date().getFullYear();
  $(function () {
    // 1、打印
    $('#print').click(function () {
      $('#hib').hide();
      window.print();
      $('#hib').show();
    });

    $('button').click(function () {
      year = this.getAttribute("value");
      var ts = "";
      $("input:checkbox[name=types]:checked").each(function (i) {
        ts += $(this).val() + ","
      });
      ts = ts.substring(0, ts.length - 1);
      getData(year, ts);
    });

    $('input:checkbox[name=types]').click(function () {
      var ts = "";
      $("input:checkbox[name=types]:checked").each(function (i) {
        ts += $(this).val() + ","
      });
      ts = ts.substring(0, ts.length - 1);
      getData(year, ts);
    });

    // 默认显示最后一个月的数据
    $('button:last()').trigger("click");
  });

  function getData(year, ts) {
    $('#title').empty();
    $('#canvas1').empty();
    $('#canvas2').empty();
    $('#title').html(year + "年日常消费记录统计");

    $.getJSON('/account/getMonthAccount', {'year': year, 'ts': ts}, function (data) {
      let i;
      const x = [];
      for (i = 0; i < data.x.length; i++) {
        x.push(data.x[i] + "月");
      }

      var curr = [];
      for (i = 0; i < data.curr.length; i++) {
        curr.push(data.curr[i]);
      }

      const last = [];
      for (i = 0; i < data.last.length; i++) {
        last.push(data.last[i]);
      }

      const series = [
        {
          name: year + '年消费',
          data: curr
        },
        {
          name: (year - 1) + '年消费',
          data: last
        }
      ];
      createChine("canvas1", x, series);
    });

    $.getJSON('/account/getYearAccount', {'year': year, 'ts': ts}, function (data) {
      var x = data.x;
      var result = [];
      for (var i = 0; i < data.result.length; i++) {
        result.push(data.result[i]);
      }
      createChine("canvas2", x, [
        {
          name: '年度消费',
          data: result
        }
      ]);
    });
  }

  function createChine(id, x, series) {
    var chart = new AChart({
      theme: AChart.Theme.SmoothBase,
      id: id,
      width: 750,
      height: 500,
      plotCfg: {
        margin: [50, 50, 80]
        //画板的边距
      },
      xAxis: {
        categories: x
      },
      seriesOptions: { //设置多个序列共同的属性
        lineCfg: { //不同类型的图对应不同的共用属性，lineCfg,areaCfg,columnCfg等，type + Cfg 标示
          smooth: true,
          labels: { //标示显示文本
            label: { //文本样式
              y: -15
            },
            //渲染文本
            renderer: function (value, item) { //通过item修改属性
              if (value > 15000) {
                item.fill = 'red';
                item['font-weight'] = 'bold';
                item['font-size'] = 16;
              }
              return value;
            }
          }
        }
      },
      tooltip: {
        valueSuffix: '￥',
        shared: true, //是否多个数据序列共同显示信息
        crosshairs: true
        //是否出现基准线
      },
      series: series
    });
    chart.render();
  }

</script>
</body>
</html>

